<template>
  <div class="fans">
    <van-sticky offset-top="46"><h4 class="title">粉丝列表</h4></van-sticky>

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :immediate-check="false"
      ref="list"
    >
      <van-cell-group inset>
        <van-cell
          v-for="fan in fans"
          :key="fan.id"
          :label="fan.content"
          label-class="reply-content"
          center
        >
          <template #title>
            <van-row type="flex" align="center">
              <van-col>
                <van-image
                  width="40px"
                  height="40px"
                  fit="cover"
                  round
                  :src="fan.decorate_avatar"
                  @click="goUser(fan.id)"
                />
              </van-col>
              <van-col
                class="reply-name"
                @click="goUser(fan.id)"
                style="margin-left: 10px"
                >{{ fan.username }}</van-col
              >
              <van-col>
                <span
                  class="iconfont icon-xingbienan"
                  v-if="fan.sex == '0'"
                ></span>
                <span class="iconfont icon-xingbienv" v-else></span>
              </van-col>
            </van-row>
          </template>
          <template #right-icon>
            <div v-if="fan.id != tokenInfo.user_id">
              <van-button
                icon="add-o"
                type="info"
                size="mini"
                color="#94c138"
                plain
                round
                v-if="!fan.fans.includes(tokenInfo.user_id)"
                @click="followUser(fan)"
              >
                关注
              </van-button>

              <van-button
                icon="checked"
                type="info"
                size="mini"
                color="#94c138"
                plain
                round
                v-else
                @click="unfollowUser(fan)"
              >
                已关注
              </van-button>
            </div>
            <div v-else>
              <span style="margin-right: 15px; color: #94c138">我</span>
            </div>
          </template>
        </van-cell>
      </van-cell-group>
    </van-list>
  </div>
</template>

<script>
import { userFansAPI } from "@/api/userApi";
import { followUserAPI, unfollowUserAPI } from "@/api/userApi";
import { mapState } from "vuex";
import "@/assets/iconfont.css";
export default {
  data() {
    return {
      fans: [],
      loading: false,
      finished: false,
      page: 1,
    };
  },
  computed: {
    ...mapState("user", ["tokenInfo", "watchingUser"]),
  },
  methods: {
    async onLoad() {
      const { data: res } = await userFansAPI(this.$route.params.id, this.page);
      this.fans = [...this.fans, ...res.results];
      this.page++;
      this.loading = false;
      if (!res.next) {
        this.finished = true;
        return;
      }
    },
    goUser(id) {
      this.$router.push(`/users/${id}`);
    },
    async followUser(user) {
      const { data: res } = await followUserAPI(user.id);
      if (res.message == "OK") {
        this.$notify({
          type: "success",
          message: "关注成功",
          duration: 1000,
        });
        this.$emit("initWatchingUser", this.$route.params.id);
      }
    },
    async unfollowUser(user) {
      const { data: res } = await unfollowUserAPI(user.id);
      if (res.message == "OK") {
        this.$notify({
          type: "success",
          message: "取消关注成功",
          duration: 1000,
        });
        this.$emit("initWatchingUser", this.$route.params.id);
        // const index = user.fans.findIndex((id) => id == this.tokenInfo.user_id);
        // if (index !== -1) {
        //   user.fans.splice(index, 1);
        // }
      }
    },
    reset() {
      this.fans = [];
      this.loading = false;
      this.finished = false;
      this.page = 1;
      this.$refs.list.check();
    },
  },
  watch: {
    $route: function () {
      this.reset();
    },
  },
  mounted() {
    this.$refs.list.check();
  },
};
</script>

<style lang="less" scoped>
.title {
  text-align: center;
  margin: 0px 0px;
  padding: 10px 0px;
}
</style>
